<template>
  <div class="body-box">
    <!-- 第三行数据 -->
    <div class="d-flex">
      <dv-border-box-12 :color="datavColors">
        <center-left1 />
      </dv-border-box-12>
      <dv-border-box-12 :color="datavColors">
        <center-left2 />
      </dv-border-box-12>
      <!-- 中间 -->
      <center />
      <!-- 中间 -->
      <center-right1 />
    </div>
    <!-- 第四行数据 -->
    <div class="bototm-box">
      <dv-border-box-13 :color="datavColors">
        <bottom-left />
      </dv-border-box-13>
      <dv-border-box-12 :color="datavColors">
        <bottom-right />
      </dv-border-box-12>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed, ref, reactive } from "vue";
import {useStore} from "vuex"
import CenterLeft1 from "./centerLeft1/index.vue";
import CenterLeft2 from "./centerLeft2/index.vue";
import Center from "./center/index.vue";
import CenterRight1 from "./centerRight1/index.vue";
import BottomLeft from "./bottomLeft/index.vue";
import BottomRight from "./bottomRight/index.vue";

export default defineComponent({
  components: {
    CenterLeft1,
    CenterLeft2,
    Center,
    CenterRight1,
    BottomLeft,
    BottomRight,
  },
  setup() {
    const datavColors = computed(() => useStore().state.datavColors)
    return { datavColors }
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.dv-border-box-12 {
  width: auto;
  height: auto;
}
.body-box {
  margin-top: 16px;
  display: flex;
  flex-direction: column;

  //下方区域的布局
  .content-box {
    display: grid;
    grid-template-columns: auto auto auto;
  }

  // 底部数据
  .bototm-box {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, 50%);
  }
}
</style>
